<template>
  <div class="bigbox">
    <div class="box">
      <div class="topbox">
        <div class="top">
          <!--个人工具饼图  -->
          <div ref="material" class="w100"></div>
          <!--出勤率  -->
          <div ref="Inbound" class="w100 w550"></div>
          <div class="w100">


            <div class="gogo">
              <vue-seamless-scroll :data="DataLikeList"  :class-option="classOption" class="seamless-warp">
                <ul class="item">
                  <li v-for="item in DataLikeList">
                    <span class="title" v-text="item.name"></span><span class="date" v-text="item.time"></span><span>收到了点赞</span>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>


          </div>
        </div>
      </div>
      <div class="centerbox">
        <!-- 排行榜头部信息 -->
        <div class="centertop">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="排行榜" name="first">排行榜</el-tab-pane>
<!--            <el-tab-pane label="访问量" name="second">访问量</el-tab-pane>-->
          </el-tabs>
        </div>

        <div class="center">
          <!--展示排行榜信息-->
          <div class="leftbox">
            <div class="left" ref="sale"></div>
          </div>

          <!--展示员工并且可以点赞 -->
          <div>
            <el-table
              :data="list"
              stripe
              height="380px"
              style="width: 500px">
              <el-table-column
                prop="empName"
                label="姓名">
              </el-table-column>
              <el-table-column
                prop="ranking"
                label="当前排名">
              </el-table-column>
              <el-table-column
                label="操作">
                <template v-slot="{row}">
                  <el-button type="primary" @click="like(row.empId)">点赞</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { LikeEmployee, isLike, LikeList, DataLike, getTool, getDataCount } from '@/api/personnel/like'
import * as echarts from 'echarts';
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      activeName: 'first',
      askename: '门店销售额排名',
      list:[],
      likeList:[],
      DataLikeList:[],
      data1:[],
      data2:[],
      toolList:[] ,// 工具信息
      dataCount:{}, // 星期几
    }
  },
  computed:{
    classOption () {
      return {
        // 滚动方向 默认为上 0为下
        // direction: 0,
        //速度
        step:0.3
      }
    },
  },

  methods: {
    // 获取当前星期几
    getDataCount(){
      getDataCount().then((res)=>{
       this.dataCount = res;
      })
    },
    // 获取工具信息
    getTool(){
      let data = {
        pageNum : 1,
        pageSize:5
      }
      getTool(data).then((res)=>{
        this.toolList = res.rows
      })
      console.log('////'+this.toolList)
    },
    // 获取员工信息
    getList(){
      LikeEmployee().then((res)=>{
        this.list = res
      })
    },
    // 发起员工点赞
    like(empId){
      isLike(empId).then((res)=>{
        this.getList()
        this.getLikeList()
        this.getDataLike()
      })
    },
    // 获取员工排名信息
    getLikeList(){
      LikeList().then((res)=>{
        this.likeList = res
        for (let i = 0; i < this.likeList.length; i++) {
          this.data1[i] = this.likeList[i].name
          this.data2[i] = this.likeList[i].sales
        }
        this.sale()
      })
    },
    // 获取动态点赞时间
    getDataLike(){
      DataLike().then((res)=>{
        this.DataLikeList = res
      })
    },
    // 排行榜
    sale() {
      var myChart = echarts.init(this.$refs.sale);
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data:this.data1,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
              normal: {
                color: '#6395f9'
              }
            },
            data:this.data2,
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 出勤管理
    Inbound() {
      this.getDataCount()
      var myChart = echarts.init(this.$refs.Inbound);
      var option;
      option = {
        grid: {
          x: 80,
          y: 120,
          x2: 50,
          y2: 50,
          borderWidth: 1
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        title: {
          text: '出勤率',
          left: 'center',
          padding: [40, 100, 100, 100],
          textStyle: {
            color: '#333333',
            fontWeight: 'bold',
            fontSize: 22
          }
        },
        legend: {
          data: ['出勤', '离勤'],
          padding: [80, 200, 100, 100],
        },
        xAxis: [
          {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 30,
            interval: 5,
            axisLabel: {
              formatter: '{value} 位'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#74632f"
              }
            },
          },
          {
            type: 'value',
            position: 'left',
            name: '',
            min: 0,
            max: 30,
            interval: 5,
            axisLabel: {
              formatter: '{value} 位'
            }
          }
        ],
        series: [
          {
            name: '出勤',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 位';
              }
            },
            itemStyle: {
              normal: {
                color: '#6395f9'
              }
            },
            data: [this.dataCount.星期一, this.dataCount.星期二, this.dataCount.星期三, this.dataCount.星期四, this.dataCount.星期五, this.dataCount.星期六, this.dataCount.星期日]
            //  data: [10, 15, 20, 10, 22, 12, 18]

          },
          {
            name: '离勤',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 位';
              }
            },
            itemStyle: {
              normal: {
                color: '#91cc75'
              }
            },
            data: [10, 25, 20, 9, 16, 20, 10]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 工具存储
    material() {
      this.getTool()
      var myChart = echarts.init(this.$refs.material);
      var option;
      option = {
        title: {
          text: '工具库存',
          left: 'center',
          padding: [40, 100, 100, 100],
          textStyle: {
            color: '#333333',
            fontWeight: 'bold',
            fontSize: 22
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c}个 ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          padding: [60, 10, 10, 20]
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['20%', '50%'],

            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}{c}个'
            },
            labelLine: {
              //引导线设置
              normal: {
                show: true, //引导线显示
                length: 20,
                length2: 20
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '17',
                fontWeight: 'bold'
              }
            },
            data: [
              { value: this.toolList[0].toolCount, name: this.toolList[0].itemName, itemStyle: { color: '#6395f9' } },
              { value: this.toolList[1].toolCount, name: this.toolList[1].itemName, itemStyle: { color: '#9a66e4' } },
              { value: this.toolList[2].toolCount, name: this.toolList[2].itemName, itemStyle: { color: '#1bd175' } },
              { value: this.toolList[3].toolCount, name: this.toolList[3].itemName, itemStyle: { color: '#ffa800' } },
              { value: this.toolList[4].toolCount, name: this.toolList[4].itemName, itemStyle: { color: '#e46cbb' } }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // center标题点击监听
    handleClick(tab, event) {
      if (event.path[0].innerHTML == '访问量') {
        this.askename = '门店访问量排名'
      } else {
        this.askename = '门店销售额排名'
      }
    },
    removeel() {
      document.getElementsByClassName("el-tabs__content")[0].remove()
    }
  },
  // 钩子函数
  mounted() {
    this.getTool()
    this.getDataCount()
    this.getList()
    this.getLikeList()
    this.getDataLike()
    setTimeout(() => {
      this.sale();
      this.material();
      this.Inbound();// 绘制图表
    }, 600)
    this.removeel();
  }
}
</script>

<style>
.item{
  list-style-type: none
}
.gogo{
  position: relative;
  top: 110px;
  left: 80px;
  font-size: 20px;
  color: green;
}
.cale{
  width: 500px;
  height: 80px;
}
.bigbox {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
}

.topbox {
  height: 400px;
  width: 100%;
}

.top {
  margin-left: 8px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.top .w100 {
  background-color: #fff;
  border-radius: 20px;
  width: 550px;
  margin: 5px;
  flex: 1;
}

.centerbox {
  height: 100%;
  margin: 20px 5px 0 13px;
  background-color: #fff;
  border-radius: 20px;
}

.center {
  height: 391px;
  display: flex;
}

.leftbox {
  flex: 2.7;
  width: 1300px;
}

.rightbox {
  flex: 1;
  width: 451.34px;
}


.centertop {
  width: 100%;
  margin: 0px 10px;
  padding: 20px 20px 0 20px;
}

.left {
  width: 1000px;
  height: 100%;
}

.right {
  width: 451.34px;
  height: 100%;
}

.righttitle {
  color: rgba(0, 0, 0, .85);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}

.salecenter:nth-child(-n+3) span {
  background: #000;
  color: #fff;
}

.salecenter {
  display: flex;
  margin: 10px 0 17px 0;
}

.salecenter span {
  width: 20px;
  height: 20px;
  margin-top: 1.5px;
  margin-right: 30px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  background-color: #fafafa;
  border-radius: 20px;
}

.salename {
  flex: 0.55;
  color: rgba(0, 0, 0);
  font-size: 16px;
  line-height: 22px;
}

.salenum {
  flex: 0.3;
  color: rgba(0, 0, 0);
  font-size: 16px;
  line-height: 22px;
}

.salenum {
  overflow: auto;
}

.rightcenter {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 349px;
}

.ant-card-body {
  padding: 0 !important;
}

.calender {
  width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0px !important;
}

.ant-card {
  background: none;
}

.table-page-search-wrapper .ant-form-inline .ant-form-item {
  margin: 0 !important;
  width: 140px !important;
  align-self: flex-end;
}

.ant-btn .ant-btn-primary {
  margin-left: 10px !important;
}

.table-page-search-wrapper .ant-form-inline .ant-form-item .ant-form-item-control-wrappe {
  flex: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.seamless-warp {
  height: 229px;
  overflow: hidden;
}
</style>
